<template>
  <view
    class="sort"
    @click="sortChange"
    :class="ggclass"
    :style="{ fontSize: size }"
  >
    <!-- <i class="iconfont iconpaixu"></i>
		<i class="iconfont iconpaixu up" v-if="val == 1"></i>
		<i class="iconfont iconpaixu down" v-if="val == 2"></i> -->
    <slot></slot>
    <view class="icon-box">
      <text class="triangle up" :style="[triangleStyle]"></text>
      <text class="triangle down" :style="[triangleStyleDown]"></text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any;
import propsMixin from "../mixins/props/index.js";
const props = defineProps({
  ...propsMixin.props,
  modelValue: {
    type: [String, Number, Boolean],
    default: "",
  },
  size: {
    type: String,
    default: "",
  },
});
const sortChange = () => {
  switch (val.value) {
    case "":
      val.value = true;
      break;
    case true:
      val.value = false;
      break;
    case false:
      val.value = "";
      break;
    default:
      break;
  }
};
const reset = () => {
  val.value = "";
};

const val = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    proxy.$emit("input", val);
    proxy.$emit("change", val);
  },
});
const colorMain = computed(() => {
  return props.color || proxy.$color.main;
});
const triangleStyle = computed(() => {
  let num = parseInt(props.size) * 0.4;
  let numStr = `${num}rpx`;
  let params = {
    borderTop: `${numStr} solid transparent`,
    borderRight: `${numStr} solid transparent`,
    borderLeft: `${numStr} solid transparent`,
    borderBottom: `${numStr} solid #999999`,
  };
  if (val.value !== "" && Boolean(val.value) === true) {
    params["borderBottom"] = `${numStr} solid ${colorMain.value}`;
  } else {
    params["borderBottom"] = `${numStr} solid #999`;
  }
  return params;
});
const triangleStyleDown = computed(() => {
  let num = parseInt(props.size) * 0.4;
  let numStr = `${num}rpx`;
  let params = triangleStyle.value;
  if (val.value !== "" && Boolean(val.value) === false) {
    params["borderBottom"] = `${numStr} solid ${colorMain.value}`;
  } else {
    params["borderBottom"] = `${numStr} solid #999`;
  }
  return params;
});
</script>

<style lang="scss" scoped>
.sort {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;

  .icon-box {
    margin-left: 10rpx;
    display: flex;
    flex-direction: column;

    .up {
    }

    .down {
      transform: rotate(180deg);
      margin-top: 5rpx;
    }

    .triangle {
      width: 0;
      height: 0;
      // border-top: 12rpx solid transparent;
      // border-right: 12rpx solid transparent;
      // border-left: 12rpx solid transparent;
      // border-bottom: 10rpx solid #999999;
    }
  }
}
</style>